<template>
    <div class="app-container">
      <div class="echarts">
        <div ref="eyesightChart" class="eyesightChart"></div>
        <div ref="eyesightBadChart" class="eyesightBadChart"></div>
        <div ref="eyesightRateChart" class="eyesightRateChart"></div>
      </div>
    </div>
  </template>
  
  <script>
  import {eyesightData,eyesightschool,agePoorEyesight } from "@/api/qu/qyyeslzx";
  export default {
    name: "qyslgk",
    data() {
      return {
        eyesightChart:null,//教职工占比
        eyesightList:[],
        eyesightBadChart:null,
        eyesightBadList:[
            {name:"3岁",value:'30'},
            {name:"4岁",value:'60'},
            {name:"5岁",value:'60'},
            {name:"6岁",value:'60'},
        ],
        eyesightRateChart:null, // 保育人员占比
        eyesightRateList:[],
       
      };
    },
    created() {
      // this.getList();
      this.getDicts("base_education").then(response => {
      this.educationOptions = response.data;
    });
    },
    mounted(){
     this.eyesightBadChart = this.$echarts.init(this.$refs.eyesightBadChart);
     this.eyesightChart = this.$echarts.init(this.$refs.eyesightChart);
     this.eyesightRateChart = this.$echarts.init(this.$refs.eyesightRateChart);
     this.getEyesightData();
     this.getEyesightschool();
     this.getAgepoorEyesight();
     window.addEventListener("resize", this.monitorResize);
   },
    methods: {
      //幼儿视力统计数据
     async getEyesightData(){
         try {
           const {data} = await eyesightData();
           this.eyesightList= [
            {name:"视力达标",value:data.complianceNum},
            {name:"视力不良",value:data.poorNum},
        ],
           this.eyesightChartFun();
         } catch (error) {
           console.log(error);
         }
      },
      //各园视力统计
     async getEyesightschool(){
        try {
           const data = await eyesightschool();
           this.eyesightRateList=data.rows.map(item=>{
               return {
                name:item.schoolName,
                code:item.schoolCode,
                value:item.compliancePro,
               }
           })
           this.eyesightRateChartFn();
         } catch (error) {
           console.log(error);
         }
      },
      //视力不良数据
     async getAgepoorEyesight(){
      try {
        const {data} =  await agePoorEyesight();
        this.eyesightBadList=[
            {name:"4岁",value:data.age4},
            {name:"5岁",value:data.age5},
            {name:"6岁",value:data.age6},
            {name:"7岁",value:data.age7},
        ],
        this.eyesightBadFun();
      } catch (error) {
        console.log(error);
      }
      },
    eyesightBadFun(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '视力不良幼儿分布情况',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                //  rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.eyesightBadList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: 人",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    // name: '入园人数',
                    type: 'bar',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'48%',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.eyesightBadList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.eyesightBadChart.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
    eyesightChartFun(){
         const  option = {
           title: {
             text: '幼儿视力统计情况',
             subtext: '单位：人',
             left: 'left',
             subtextStyle:{
                  color:'#000'
                 }
           },
           tooltip: {
             trigger: 'item',
           },
           legend: {
            //  type: 'scroll',
            //  orient: 'vertical',
             left: 'right',
             top: 0,
             bottom: 0,
            
           },
           grid: {
            top:5,
           left: '1%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
           series: [
             {
               name: '',
               type: 'pie',
               radius: '70%',
               center: ['50%', '50%'],
               data:this.eyesightList,
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }
             ]
          };
          this.eyesightChart.setOption(option);
          window.addEventListener("resize", this.monitorResize);
    },
    eyesightRateChartFn(){
        const option = {
           // backgroud:'#333',
           title: {
             text: '各园幼儿视力达标率',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            dataZoom:{
             bottom:0,
             show:12/this.eyesightRateList.length<1,
             // show:true,
             type:'slider',
             zoomLock:true,
             brushSelect:false,
             height:8,
             // backgroundColor:'#000000',
             handleSize:'0',
             // moveHandleSize:1,
             // moveHandleStyle:{
             //   borderType:'dotted'
             // },
             sow:true,
             xAxisIndex:[0],
             start:0,
             end:12/this.eyesightRateList.length*100
           },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                 type: 'category',
                 axisLabel: {//x轴文字的配置
                 show: true,
                 rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.eyesightRateList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: %",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    type: 'bar',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'60',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15,
                    },
                    itemStyle: {
                        // 柱状图颜色
                        color: '#2ec7c9'
                    },
                    data: this.eyesightRateList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.eyesightRateChart.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
    },
         //地图监听窗口缩放事件
       monitorResize(){
        this.eyesightBadChart.resize();
        this.eyesightChart.resize();
        this.eyesightRateChart.resize()
      },
      
    }
  };
  </script>

  <style lang="scss" scoped>
    .echarts{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .eyesightChart{
            margin-bottom: 50px;
            width: 45%;
            height: 350px;
        }
        .eyesightBadChart {
            margin-bottom: 50px;
            width: 45%;
            height: 350px;
        }
        .eyesightRateChart{
            width: 90%;
            height: 350px;
        }
    }
  </style>